
<template>
    <div>
        <div>
            <el-button @click="handleAddSpecialty">添加专业</el-button>
        </div>
        <el-row :gutter="20">
            <el-col :span="6" :xs="15" :sm="6"  @contextmenu="specialtyTree__contextmenu">
                <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    ref="specialtyTree"
                   
                ></el-tree>
            </el-col>
            <el-col :span="18" :xs="24" :sm="18">
                <el-table :data="tableData"></el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            treeData: [],
            tableData: [],
            defaultProps: {
                children: "children",
                label: "name"
            }
        };
    },
    created() {
        this.$http("/api/specialty/list").then(({ data }) => {
            console.log("data", data);
            this.treeData = data.data;
        });
    },
    mounted () {
        this.$refs.specialtyTree.oncontextmenu = e => {
            
        }
        // console.log('this.$refs.specialtyTree', this.$refs.specialtyTree)

    },
    methods: {
        handleNodeClick() {
            console.log("arguemnts", arguments);
        },
        // 添加专业
        handleAddSpecialty() {
            this.$prompt("请输入专业", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消"
            }).then(({ value }) => {
                this.addSpecialty([value]);
            });
        },
        addSpecialty(vals) {
            if (vals.length <= 0) return;
            this.$http
                .post("/api/specialty/add", {
                    list: vals
                })
                .then(({ data }) => {
                    console.log("data", data);
                    this.$message({
                        type: "success",
                        message: data.msg
                    }).catch(() => {
                        this.$message.error(
                            "添加专业失败！请检查添加的是否有重复专业"
                        );
                    });
                });
        },

        // 右键菜单
        specialtyTree__contextmenu () {
            console.log('arguments', arguments)
        }
    }
};
</script>

<style>
</style>
